<template>
  <div>
    <h1>自定义节点HTML渲染</h1>
    <div>
      <h3>
        <el-link type="primary" href="https://x6.antv.vision/zh/docs/tutorial/advanced/react#%E6%B8%B2%E6%9F%93-html-%E8%8A%82%E7%82%B9" target="_blank">使用文档</el-link>
      </h3>
    </div>
    <el-button type="" @click="addCustom1">自定义节点1</el-button>
    <el-button type="" @click="addCustom1('tool')">自定义节点有工具</el-button>
    <el-button type="" @click="addNodeType('start')">開始節點</el-button>
    <el-button type="" @click="addNodeType('end')">結束節點</el-button>
    <el-button type="" @click="addNodeType('sql')">SQL节点</el-button>
    <el-button type="" @click="addNodeType('tab')">表节点</el-button>
    <div id="container7">
    </div>

  </div>
</template>

<script>
import dataObj from "@/mock/baseData.js";
import actionMod from "@/components/mod/html/actionMod";
import mainModFn from "@/components/mod/html/mainMod";
import sqlModFn from "@/components/mod/html/sqlMod";
import tabModFn from "@/components/mod/html/tabMod";
// import { Graph, Node, Shape } from "@antv/x6";
export default {
  data() {
    return {
      graph: "",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    addCustom1(typeStr) {
      this.graph.addNode({
        x: 0,
        y: 0,
        width: 200,
        height: 60,
        shape: "html",
        data: {
          time: new Date().toString(),
          type: typeStr ? typeStr : "node",
        },
        html: {
          render(node) {
            const data = node.getData();
            console.log("render  data", data);
            let dataText = {
              title: "測試標題",
              text: ["我是內容測試"],
            };
            return actionMod(dataText);
          },
          shouldComponentUpdate(node) {
            // 控制节点重新渲染
            return node.hasChanged("data");
          },
        },
      });
    },
    addNodeType(type) {
      if (["start", "end"].includes(type)) {
        this.mainNode(type);
      } else if (type == "sql") {
        let data = { title: "" };
        this.sqlNode(data);
      } else if (type == "tab") {
        let data = {
          title: "myTab",
          text: [
            { 字段类型: "DECIMAL(p,s)" },
            { 是否为主键: "否" },
            { 所属表中文名: "test_gbase_1" },
            { 所属表中文名: "test_gbase_1" },
            { 所属表中文名: "test_gbase_1" },
            { 所属表中文名: "test_gbase_1" },
            { 所属表中文名: "test_gbase_1" },
            { 所属表中文名: "test_gbase_1" },
            { 所属表中文名: "test_gbase_1" },
            { 所属表中文名: "test_gbase_1" },
            { 所属表中文名: "test_gbase_1" },
            { 所属表中文名: "test_gbase_1" },
            { 所属表中文名: "test_gbase_1" },
            { 所属表中文名: "test_gbase_1" },
            { 所属表中文名: "test_gbase_1" },
            { 所属表中文名: "test_gbase_1" },
            { 所属表中文名: "test_gbase_1" },
            { 所属表中文名: "test_gbase_1" },
            { 所属表中文名: "test_gbase_1" },
            { 所属表中文名: "test_gbase_1" },
            { 所属表中文名: "test_gbase_1" },
            { 所属表中文名: "test_gbase_1" },
            { 所属表中文名: "test_gbase_1" },
            { 所属表中文名: "test_gbase_1" },
            { 所属表中文名: "test_gbase_1" },
          ],
        };
        this.tabNode(data);
      }
    },
    tabNode(data) {
      this.graph.addNode({
        x: 0,
        y: 0,
        width: 344,
        height: 234,
        shape: "html",
        data: {
          time: new Date().toString(),
          type: data.type ? data.type : "tab",
        },
        html: {
          render(node) {
            // const data = node.getData();
            console.log("render  data", data);
            return tabModFn(data);
          },
          shouldComponentUpdate(node) {
            // 控制节点重新渲染
            return node.hasChanged("data");
          },
        },
      });
    },
    sqlNode(data) {
      this.graph.addNode({
        x: 0,
        y: 0,
        width: 65,
        height: 65,
        shape: "html",
        data: {
          time: new Date().toString(),
          type: data.type ? data.type : "sql",
        },
        html: {
          render(node) {
            const data = node.getData();
            console.log("render  data", data);

            return sqlModFn(data);
          },
          shouldComponentUpdate(node) {
            // 控制节点重新渲染
            return node.hasChanged("data");
          },
        },
      });
    },
    mainNode(type) {
      this.graph.addNode({
        x: 0,
        y: 0,
        width: 62,
        height: 62,
        shape: "html",
        data: {
          time: new Date().toString(),
          type: type ? type : "node",
        },
        html: {
          render(node) {
            const data = node.getData();
            console.log("render  data", data);
            let dataText = {
              title: type,
            };
            return mainModFn(type);
          },
          shouldComponentUpdate(node) {
            // 控制节点重新渲染
            return node.hasChanged("data");
          },
        },
      });
    },
    init() {
      let width = document.body.clientWidth; //网页可见区域宽：
      let height = document.body.clientHeight; //网页可见区域高：
      // 渲染画布
      const { Graph } = X6;
      const graph = new Graph({
        container: document.getElementById("container7"),
        width,
        height: 900,
        panning: {
          enabled: true, //画布可以平移
          //还可以配置 eventTypes 来设置触发画布拖拽的行为，支持 leftMouseDown、 rightMouseDown、mouseWheel，默认为 ['leftMouseDown'] 。
          eventTypes: ["leftMouseDown", "rightMouseDown", "mouseWheel"],
        },
        interacting: { nodeMovable: false },
        async: true,
        frozen: true,
        // scroller: true,
        // interacting: false,
        background: {
          color: "#fffbe6", // 设置画布背景颜色
        },
        // minimap: true,
        grid: {
          size: 10, // 网格大小 10px
          visible: true, // 渲染网格背景
        },
      });
      // graph.fromJSON(dataObj);
      graph.centerContent(); //内容居中
      this.graph = graph;
      this.clickAction(); //系统事件
      this.custoAction(); //自定义事件
      this.addDelChangeAction(); //监听添加删除改变事件
      this.moveChangeAction(); //監聽移入移出事件

      this.graph.on("node:mousedown", ({ e, x, y, node, view }) => {
        return false;
      });
    },
    clickAction() {
      this.graph.on("cell:click", ({ e, x, y, cell, view }) => {
        console.log("cell 节点/边:click", e, x, y, cell, view);
      });
      this.graph.on("node:click", ({ e, x, y, node, view }) => {
        console.log("node 节点:click", e, x, y, node, view);
      });
      this.graph.on("edge:click", ({ e, x, y, edge, view }) => {
        console.log("	edge 边:click", e, x, y, edge, view);
      });
      this.graph.on("blank:click", ({ e, x, y }) => {
        console.log("blank 画布空白区域:click", e, x, y);
      });
    },
    custoAction() {
      //自定义事件
      this.graph.on("node:delete", ({ view, e }) => {
        console.log("view, e ", view, e);
        e.stopPropagation();
        view.cell.remove();
      });
      this.graph.on("node:customevent", ({ name, view, e }) => {
        console.log("name, view, e ", name, view, e);
        if (name === "del_me") {
          e.stopPropagation();
          view.cell.remove();
        }
      });
    },
    addDelChangeAction() {
      //监听添加删除改变事件
      this.graph.on("node:added", ({ node, index, options }) => {
        console.log("node:added  node, index, options", node, index, options);
      });
      this.graph.on("node:removed", ({ node, index, options }) => {
        console.log("node:removed  node, index, options", node, index, options);
      });
      this.graph.on("node:changed", ({ node, options }) => {
        console.log("node:changed  node,  options", node, options);
      });

      this.graph.on("edge:added", ({ edge, index, options }) => {
        console.log("edge:added  edge, index, options", edge, index, options);
      });
      this.graph.on("edge:removed", ({ edge, index, options }) => {
        console.log("edge:removed  edge, index, options", edge, index, options);
      });
      this.graph.on("edge:changed", ({ edge, options }) => {
        console.log("edge:changed  edge,  options", edge, options);
      });
    },
    //監聽移入移出事件
    moveChangeAction() {
      this.graph.on("node:mouseenter", ({ e, node, view }) => {
        console.log("node:mouseenter e, node, view", e, node, view);
        if (node.data.type == "tool") {
          node.addTools([
            {
              name: "button-remove",
              args: { x: 10, y: 16 },
            },
          ]);
        }
      });
      this.graph.on("node:mouseleave", ({ e, node, view }) => {
        console.log("node:mouseleave  e, node, view", e, node, view);
        if (node.hasTool("button-remove")) {
          node.removeTool("button-remove");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/components/mod/style/actionMod.css";
@import "@/components/mod/style/main.css";
@import "@/components/mod/style/tabMod.css";
#container7 {
  width: 100%;
  height: 500px;
}
</style>